<template>
	<div>
		<el-dialog
			:title="title"
			:visible.sync="open"
			width="1200px"
			append-to-body
		>
			<el-table
				@row-dblclick="dbclick"
				v-loading="loading"
				:data="applicationList"
				:key="key"
				@selection-change="handleSelectionChange"
				:max-height="tableHeight"
			>
				<el-table-column
					:label="$t('employing_company')"
					align="employerName"
					prop="employerName"
					width="180"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					:label="$t('holiday_name')"
					align="center"
					prop="vacationName"
					width="180"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					:label="$t('total_holidays')"
					align="center"
					prop="vacationDuration"
					:show-overflow-tooltip="true"
				>
					<template slot-scope="scope">
						<el-input
							v-if="scope.row.isEdit1"
							autofocus
							v-model="scope.row.vacationDuration"
							@blur="changeHoilday(scope.row)"
							placeholder=""
						></el-input>
						<span v-else>
							{{
								formatHolidayDays(
									scope.row.vacationDuration
										? Number(scope.row.vacationDuration)
										: 0
								)
							}}</span
						>
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('leave_holidays')"
					align="center"
					prop="leaveDays"
					:show-overflow-tooltip="true"
				>
					<template slot-scope="scope">
						<el-input
							v-if="scope.row.isEdit1"
							autofocus
							v-model="scope.row.leaveDays"
							@blur="changeHoilday(scope.row)"
							placeholder=""
						></el-input>
						<span v-else>{{ scope.row.leaveDays }}</span>
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('manual_holidays')"
					align="center"
					prop="modifyDays"
					:show-overflow-tooltip="true"
				>
					<template slot-scope="scope">
						<!-- <el-input
                            v-if="scope.row.isEdit"
                            autofocus
                            v-model="scope.row.modifyDays"
                            @blur="changeHoilday(scope.row)"
                            placeholder=""
                        ></el-input> -->
						<span
							style="color: #46a6ff; cursor: pointer"
							@click="$refs.modifyLeave.open(scope.row)"
							>{{ scope.row.modifyDays }}</span
						>
						<!-- <span v-else>{{ scope.row.modifyDays }}</span> -->
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('expireDuration_holidays')"
					align="center"
					prop="balance"
					:show-overflow-tooltip="true"
				>
					<template slot-scope="scope">
						<el-input
							v-if="scope.row.isEdit1"
							autofocus
							v-model="scope.row.expireDurationDays"
							@blur="changeHoilday(scope.row)"
							placeholder=""
						></el-input>
						<span v-else>{{
							formatHolidayDays(
								scope.row.expireDurationDays
									? Number(scope.row.expireDurationDays)
									: 0
							)
						}}</span>
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('balance_holidays')"
					align="center"
					prop="balance"
					:show-overflow-tooltip="true"
				>
					<template slot-scope="scope">
						<el-input
							v-if="scope.row.isEdit1"
							autofocus
							v-model="scope.row.balance"
							@blur="changeHoilday(scope.row)"
							placeholder=""
						></el-input>
						<span v-else>{{
							formatHolidayDays(
								scope.row.balance
									? Number(scope.row.balance)
									: 0
							)
						}}</span>
					</template>
				</el-table-column>
				<!-- <el-table-column
					:label="$t('action')"
					align="center"
					class-name="small-padding fixed-width"
				>
					<template slot-scope="scope">
						<el-button
							size="mini"
							type="text"
							icon="el-icon-edit"
							@click="resetHolidays(scope.row)"
							>{{ $t('reset') }}</el-button
						>
					</template>
				</el-table-column> -->
			</el-table>

			<pagination
				v-show="total > 0"
				:total="total"
				:page.sync="queryParams.pageNum"
				:limit.sync="queryParams.pageSize"
				@pagination="getList"
				:page-sizes="[10, 20, 30, 50, 100, 200]"
			/>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">{{ $t('cancel') }}</el-button>
			</div>
		</el-dialog>
		<modifyLeave ref="modifyLeave" />
	</div>
</template>

<script>
import { listApplication, changeReport } from '@/api/custom/vacationReport';
import modifyLeave from '@/components/modifyLeave/index';
export default {
	components: {
		modifyLeave,
	},
	props: {},
	data() {
		return {
			key: 0,
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			applicationList: [],
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 总条数
			total: 0,
			// 考勤详情表格数据
			detailsList: [],
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
			},
		};
	},
	created() {},
	methods: {
		formatHolidayDays(days) {
			// 判断是否为整数
			if (Number.isInteger(days)) {
				// 如果是整数，直接返回整数部分
				return days.toString();
			} else {
				// 如果是小数，保留六位小数或者小数点后面的数字不超过六位
				return days.toFixed(
					Math.min(6, (days.toString().split('.')[1] || '').length)
				);
			}
		},

		/** 新增按钮操作 */
		handleAdd(type) {
			this.reset(type);
			this.open = true;
			this.title = `${this.$t('add')}${
				type == 1 ? this.$t('fixed_salary') : this.$t('variable_pay')
			}`;
		},
		handleUpdate(row) {
			this.queryParams.employeeId = row.id;
			this.getList();
			this.open = true;
			
			this.title = `${this.$t('modifying_holidays')}${this.$t('holidays_of_the_year')}`;
		},
		/** 查询假期申请列表 */
		getList() {
			this.loading = true;
			listApplication(this.queryParams)
				.then((response) => {
					if (
						!response.data.records.length ||
						response.data.records == null
					)
						response.data.records.forEach((item) => {
							item.isEdit = false;
						});
					this.applicationList = response.data.records;
					if (this.applicationList && this.applicationList.length) {
						this.applicationList.forEach((e) => {
							e.vacationDuration =
								e.vacationDuration + e.expireDuration;
							e.balance =
								e.vacationDuration - e.expireDuration -
								e.leaveDays +
								e.modifyDays;
							e.expireDurationDays = e.expireDuration;
						});
					}
					this.total = response.data.total;
					this.loading = false;
				})
				.catch((e) => {
					console.log('🐛 ~ listApplication ~ e:', e);
					this.loading = false;
				});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset(type) {
			this.resetForm('form');
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.id);
			this.single = selection.length !== 1;
			this.multiple = !selection.length;
		},
		dbclick(row, column) {
			if (column.label == this.$t('manual_holidays')) {
				row.isEdit = true;
			} else {
				row.isEdit = false;
			}
			this.key += 1;
			this.$forceUpdate();
			row['oldRow'] = JSON.parse(JSON.stringify(row));
		},
		changeHoilday(e) {
			e.isEdit = false;
			let data = {
				vacationId: e.vacationId,
				modifyDays: Number(e.modifyDays),
				employeeId: e.employeeId,
				employerId: e.employerId,
			};
			changeReport(data).then((response) => {
				this.$modal.msgSuccess(this.$t('operation_successful'));
				this.getList();
			});
		},
		resetHolidays(e) {
			// if (e.oldRow) {
			let data = {
				vacationId: e.vacationId,
				leaveDays: 0,
				employeeId: e.employeeId,
				employerId: e.employerId,
			};
			changeReport(data).then((response) => {
				this.$modal.msgSuccess(this.$t('operation_successful'));
				this.getList();
			});
			// }
		},
	},
};
</script>
<style scoped lang="scss"></style>
